<template>
    <div>
        <a-card>
            <a-space direction="vertical" size="large">
                <a-form ref="searchFormRef" :model="searchParams" layout="inline">


                    <a-form-item field="name" label="部门名称">
                        <a-input v-model="searchParams.name" placeholder="请输入部门名称" />
                    </a-form-item>

                    <a-form-item field="organization_id" label="所属组织">
                        <a-select v-model="searchParams.organization_id" placeholder="请选择所属组织">
                            <a-option v-for="item in organizationList" :key="item.id" :value="item.id">{{
                                item.name }}</a-option>
                        </a-select>
                    </a-form-item>


                    <a-form-item field="right">
                        <a-button @click="handleSearch">Submit</a-button>
                        <a-button @click="reset">Reset</a-button>
                    </a-form-item>
                </a-form>
            </a-space>
        </a-card>
        <m-table :columns="columns" :data="data" :loading="loading" :title="$route.meta.title">
            <template #extra>
                <a-button type="primary" shape="round" v-perms="['/adminapi/system.organize.department/save']" @click="handleEdit('add')">
                    <template #icon>
                        <icon-plus />
                    </template>
                </a-button>
            </template>

            <template #action="{ record }">
                <a-space>
                    <a-button type="primary" shape="round" v-perms="['/adminapi/system.organize.department/update']" @click="handleEdit('edit', record)">
                        <template #icon>
                            <icon-edit />
                        </template>
                    </a-button>

                    <a-popconfirm :content="`确定删除 [${record.name}] 吗？`" @ok="handleDelete(record.id)">
                        <a-button shape="round" type="primary" status="danger" v-perms="['/adminapi/system.organize.department/delete']">
                            <template #icon>
                                <icon-delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </a-space>
            </template>

        </m-table>

        <EditPopup ref="editPopupRef" @success="run" />
    </div>
</template>

<script setup lang="ts">
import { getDepartmentList , deleteDepartment} from '@/api/system/organize/department'
import { getOrganizationList } from '@/api/system/organize/company'
import { useRequest } from 'vue-request'
import EditPopup from './components/edit.vue'
const editPopupRef = ref<InstanceType<typeof EditPopup>>()
const searchFormRef = ref()


const searchParams = ref({
    name: '',
    organization_id: ''
})

const { data, run, loading, refresh, params } = useRequest(getDepartmentList, {
    defaultParams: [
        {
            page: 1,
            pageSize: 10,
        }
    ]
})

const { data: organizationList } = useRequest(getOrganizationList)

const handleSearch = () => {
    params.value[0] = searchParams.value
    refresh()
}

const reset = () => {
    searchFormRef.value.resetFields()
    params.value[0] = searchParams.value
    refresh()
}

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 100,
        fixed: 'left'
    },
    {
        title: '部门名称',
        dataIndex: 'name'
    },
    {
        title: '所属组织',
        dataIndex: 'organization.name'
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 100,
        fixed: 'right'
    }
]

const handleEdit = (mode: 'add' | 'edit', record?: any) => {
    editPopupRef.value?.open(mode)
    if (record) {
        nextTick(() => {
            editPopupRef.value?.setFormData(record)
        })
    }
}

const handleDelete = async (id: number) => {
    await deleteDepartment(id)
    run(params.value[0])
}
</script>
